#@layoutT('')
#define main()
<div class="container-wrap">
<!--   #@formStart()-->
<!--      #@queryStart('关键词查询')-->
<!--   <input type="search" name="keyword" autocomplete="off" class="layui-input" placeholder="搜索关键词" style="padding-left:20px"/>-->
<!--   <i class="layui-icon layui-icon-search" style="position: absolute;top:7px;left:2px"></i>-->
<!--      #@queryEnd()-->
<!--   #@formEnd()-->
   #@formStart()
   #@queryStart('客户姓名')
   <input type="search" name="customername" autocomplete="off" class="layui-input" placeholder="客户姓名"/>
   #@queryEnd()
   #@queryStart('联系方式')
   <input type="search" name="phonenum" autocomplete="off" class="layui-input " placeholder="联系方式"/>
   #@queryEnd()
   #@queryStart('证件号')
   <input type="search" name="idcard" autocomplete="off" class="layui-input" placeholder="证件号"/>
   #@queryEnd()
   #@formEnd()

   #@table()

   #@subTable(['绑定手环信息'])
</div>
#end

#define js()


<!-- 引入从表js-->
#@subTableJs()


<script type="text/html" id="sexStr">
   {{ d.gender == 1 ? '男' : '女' }}
</script>
<!-- 分页表格 -->
<script>
    gridArgs.title='';
    gridArgs.dataId='id';
    gridArgs.heightDiff=340;//调整表格高度
    gridArgs.deleteUrl='#(path)/portal/business/iCustomerInfo/delete';
    gridArgs.updateUrl='#(path)/portal/business/iCustomerInfo/edit/';
    gridArgs.addUrl='#(path)/portal/business/iCustomerInfo/add';
    gridArgs.gridDivId ='maingrid';
    initGrid({id : 'maingrid'
        ,elem : '#maingrid'
        ,toolbar:'#table_toolbar'//开启头部工具栏，并为其绑定左侧模板
        ,cellMinWidth: 100
        ,cols : [ [
          {title: '主键',field : 'id',width : 35,checkbox : true},
				 {title:'客户姓名',field:'customername'},
				 {title:'性别',field:'gender' ,templet:'#sexStr'},
				 {title:'年龄',field:'age'},
				 {title:'联系方式',field:'phonenum'},
				 {title:'证件号',field:'idcard'},
				 {title:'设备ID',field:'devideid'},

            {fixed:'right',width : 180,align : 'left',toolbar : '#bar_maingrid'}
            ] ]
        ,url:"#(path)/portal/business/iCustomerInfo/list"
        ,searchForm : 'searchForm'
    });

</script>


<!-- 从表 -->
<script>
   //从表1
   function renderSubTable1(refId){
      var editTable=new EditTable();
      var config=editTable.config;
      //除了第一个用默认配置,其他表格都要配置自己的参数
      config.tableId='tab_item_1';//表Id
      config.addBtnId='add_btn_1';//添加按钮ID
      config.delEvent='del_btn_1';//删除按钮Even值
      config.toolbar='table_toolbar_1';//表头工具ID
      config.rowbar='table_rowbar_1';//行按钮ID
      config.saveBtnId="save_btn_1";//保存表格接口
      config.queryUrl='#(path)/portal/business/iDeviceInfo/list2';//查询接口
      config.params={"devideid":refId};//查询参数
      config.saveUrl='#(path)/portal/business/iDeviceInfo/saveTableData?type=formTable&refId='+refId;//保存接口
      config.deleteUrl='#(path)/portal/business/iDeviceInfo/modify?devideid'+refId;//删除接口
      config.rowData={"gender":"","idcard":"","phonenum":"","inputtime":"","id":"","customername":"","updatetime":"","devideid":"","age":""};
      editTable.render(config,{
         elem: '#'+config.tableId
         ,height: '300'
         ,toolbar:'#'+config.toolbar
         ,cols: [ [
            {title: '设备ID',field : 'devideid'},
            {title:'经度',field:'latitude'},
            {title:'纬度',field:'longitude'},
            {title:'心率',field:'heartrate'},
            {title:'体温',field:'bodytemperature'},
            {title:'收缩压',field:'systolicpressure'},
            {title:'舒张压',field:'diastolicpressure'},
            {title:'血氧',field:'bloodoxygen'},
            {title:'状态',field:'status'},
            {title:'步数',field:'stepcount'},
            {title:'上线时间',field:'onlinetime'},
            {title:'下线时间',field:'offlinetime'}
         ] ]
      });
   }

</script>

#end

<!-- 监听主表点击事件 -->
#define layuiFunc()
//监听行单击事件（双击事件为：rowDouble）
table.on('row(maingrid)', function(obj){
var data = obj.data;
var refId=data.devideid;
//渲染从表数据
renderSubTable1(refId);

//标注选中样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

});
#end
